<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_DOM事件监听</title>
</head>
<body>
    <button onclick="alert('点击了')">按钮</button>
    <button id="btn">按钮</button>
    <h4>震惊：星期五居然发生了这种事...</h4>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium, cupiditate dignissimos dolor eaque ex id illum incidunt laborum laudantium magni natus nemo nesciunt nisi numquam rem sit tempora tenetur.
    </div>
    <script>
        /* window对象是浏览器内置的全局对象，代表了当前浏览器窗口 */
        window.addEventListener('resize',function (){
            alert('窗口大小被改变了！')
        })
        window.addEventListener('scroll',function (){
            alert('窗口被滚动了！')
        })

        /* 鼠标点击事件*/
        let btnE = document.querySelector('#btn');
        btnE.addEventListener('click',function (){
            alert('点击了2');
        })
        let h4E = document.querySelector('h4');
        h4E.addEventListener('mouseover',function (){
            console.log('标题被查看了！')
        })
    </script>

</body>
</html>